var themes = [{
  name: "light",
  message: "Hello sunshine — Light theme is on!"
}, {
  name: "dark",
  message: "The night is yours — Dark theme is on!"
}, {
  name: "nord",
  message: "The frost has settled - Nord theme is on!"
}, {
  name: "ocean",
  message: "Blue skies and high tides — Ocean theme is on!"
}];

var setTheme = function setTheme(theme) {
  document.body.className = "";
  document.body.classList.add("theme-".concat(theme.name));
};

var updateStatus = function updateStatus(theme) {
  var status = document.getElementById("status");
  status.textContent = theme.message;
};
document.addEventListener("DOMContentLoaded", function () {
  themes.forEach(function (theme) {
    var button = document.getElementById("theme-".concat(theme.name));
    if (button) {
      button.addEventListener("click", function () {
        setTheme(theme);
        updateStatus(theme);
        closeMenu();
      });
    }
  });
  var toggleButton = document.getElementById("theme-switcher-button");
  var menu = document.getElementById("theme-dropdown");
  toggleButton.addEventListener("click", function () {
    var isExpanded = toggleButton.getAttribute("aria-expanded") === "true";
    if (isExpanded) {
      closeMenu();
    } else {
      openMenu();
    }
  });

  function closeMenu() {
    menu.setAttribute("hidden", "");
    toggleButton.setAttribute("aria-expanded", "false");
  }

  function openMenu() {
    menu.removeAttribute("hidden");
    toggleButton.setAttribute("aria-expanded", "true");
  }

  // Close the menu when clicking outside
  document.addEventListener("click", function (e) {
    if (!toggleButton.contains(e.target) && !menu.contains(e.target)) {
      closeMenu();
    }
  });
});